<template>
    <div class="custom">
        <TablePage :query="query" :columns="columns" :data="data" @onLoad="onload"/>

        <el-drawer v-model="visible" direction="rtl" @close="form={}">
            <el-divider>买家信息</el-divider>
            <el-descriptions :column="2" border>
                <el-descriptions-item label-class-name="description-label">
                    <template #label>
                        <div class="cell-item">
                            会员手机号
                        </div>
                    </template>
                    <transition v-if="form.buyer">{{ form.buyer.mobile }}</transition>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="description-label">
                    <template #label>
                        <div class="cell-item">
                            会员昵称
                        </div>
                    </template>
                    <transition v-if="form.buyer">{{ form.buyer.nickname }}</transition>
                </el-descriptions-item>
            </el-descriptions>
            <el-divider>活动商品</el-divider>
            <el-descriptions :column="1" border>
                <el-descriptions-item label-class-name="description-label" label="活动封面">
                    <transition v-if="form.thumb">
                        <el-image :preview-src-list="[form.thumb]" :src="form.thumb"/>
                    </transition>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="description-label" label="活动名字">
                    <transition v-if="form.title">{{ form.title }}</transition>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="description-label" label="价格">
                    <transition v-if="form.costPrice">{{ form.costPrice }}</transition>
                </el-descriptions-item>
            </el-descriptions>
            <el-divider>订单信息</el-divider>
            <el-descriptions :column="1" border>
                <el-descriptions-item label-class-name="description-label" label="订单状态">
                    {{ form.status }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="description-label" label="订单号">
                    {{ form.id }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="description-label" label="活动优惠">
                    ¥{{ (form.discount || 0).toFixed(2) }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="description-label" label="喜糖抵扣">
                    ¥{{ (form.sugar || 0).toFixed(2) }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="description-label" label="实际支付">
                    ¥{{ (form.payment || 0).toFixed(2) }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="description-label" label="付款方式">
                    <template v-if="form.payType">{{ form.payType }}</template>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="description-label" label="下单时间">
                    {{ $api.parseTime(form.created || 0) }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="description-label"
                                      label="支付时间">
                    <template v-if="form.payTime&&form.payTime>0">
                        {{ $api.parseTime(form.payTime || 0) }}
                    </template>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="description-label"
                                      label="买家留言">
                    <template>
                        {{ form.buyerRemark }}
                    </template>
                </el-descriptions-item>

            </el-descriptions>

            <el-divider v-if="form.giftDirection>0">转增订单</el-divider>
            <el-descriptions :column="1" border v-if="form.giftDirection>0">
                <el-descriptions-item label-class-name="description-label" label="转增方向">
                    {{ form.giftDirection == 1 ? '转出' : '转入' }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="description-label"
                                      :label="form.giftDirection == 2?'来自转增':'转出给'">
                    <div class="flex" v-if="form.giftUser">
                        <div class="avatar" style="padding-right: 15px;">
                            <img v-if="form.giftUser.avatar"
                                 style="width: 60px;height: 60px;border-radius: 60px;overflow: hidden;"
                                 :src="form.giftUser.avatar">
                        </div>
                        <div class="nickname">
                            <p>{{ form.giftUser.nickname }}</p>
                            <p> {{ form.giftUser.mobile }}</p>
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </el-drawer>


    </div>
</template>
<script>
import TablePage from "@/components/TablePage";
import {activityType, activityTypes, orderStatus} from "@/utils/shopkeeper";

export default {
    components: {TablePage},
    data() {
        return {
            typeList: [],
            query: [
                {
                    type: 'select',
                    label: '活动类型',
                    placeholder: '活动类型搜索',
                    key: 'activityType',
                    styles: {width: '150px'},
                    options: activityTypes,
                },
                {
                    type: 'text',
                    label: '商品名',
                    placeholder: '商品名搜索',
                    key: 'title'
                },
                {
                    type: 'text',
                    label: '店铺名',
                    placeholder: '店铺名搜索',
                    key: 'shopName'
                }, {
                    type: 'text',
                    label: '手机号',
                    placeholder: '买家手机号搜索',
                    key: 'mobile'
                },
                {
                    type: 'select',
                    label: '状态',
                    placeholder: '订单状态搜索',
                    key: 'status',
                    styles: {width: '150px'},
                    options: [
                        {label: '等待支付', value: 'WAIT_PAY'},
                        {label: '等待使用', value: 'WAIT_USE'},
                    ],

                },
                {
                    type: 'select',
                    label: '付款方式',
                    placeholder: '付款方式搜索',
                    key: 'payType',
                    styles: {width: '150px'},
                    options: [
                        {label: '余额支付', value: 'money'},
                        {label: '微信支付', value: 'weixin'},
                    ],

                },
                {
                    type: 'date-picker',
                    label: '下单时间',
                    placeholder: '请选择时间范围',
                    key: 'time'
                },
                {
                    type: 'buttons',
                    buttons: [
                        {
                            label: '导出表格',
                            type: 'primary',
                            callback: () => {
                                this.exportExcel()
                            }
                        },
                        {
                            label: '导出记录',
                            type: 'primary',
                            callback: () => {
                                this.$store.dispatch('excel/show', 'order')
                            }
                        }
                    ]
                }
            ],
            columns: [
                {
                    label: '#',
                    prop: '$index',
                    width: '70px'
                },
                {
                    label: '活动类型',
                    type: 'render',
                    width: '100px',
                    render: (data) => {
                        return activityType(data.activityType)
                    },
                }, {
                    label: '店铺信息',
                    type: 'render',
                    width: '180px',
                    render: (data) => {
                        if (!data.shop) return ''
                        return `<div class="flex flex-center">
                      <div class="avatar"><img src="${data.shop.logo}" style="width: 48px;height: 48px;border-radius: 50px"></div>
                      <div class="flex1" style="padding-left: 15px;text-align: left">${data.shop.name}</div>
                    </div>`
                    }
                },
                {
                    label: '商品图片',
                    type: 'render',
                    width: '100px',
                    render: ({thumb}) => {
                        return `<img src="${thumb}" style="width: 48px;height: 48px;">`
                    }
                },
                {
                    label: '商品标题/订单id',
                    prop: 'title',
                    width: '280px',
                    type: 'render',
                    render: (data) => {
                        return `<p>${data.title}</p><p>${data.id}</p>`
                    }
                },
                {
                    label: '原价',
                    width: '90px',
                    prop: 'costPrice',
                },
                {
                    label: '优惠价格',
                    width: '90px',
                    prop: 'discount',
                },
                {
                    label: '喜糖数量',
                    width: '90px',
                    prop: 'sugar',
                },
                {
                    label: '支付金额',
                    width: '90px',
                    prop: 'payment',
                },
                {
                    label: '付款方式',
                    width: '90px',
                    type: 'render',
                    render: (data) => {
                        if (data.payType == 'weixin') return '微信'
                        else if (data.payType == 'money') return '余额'
                        else data.payType;
                    }
                },
                {
                    label: '买家手机',
                    width: '180px',
                    type: 'render',
                    render: (data) => {
                        if (!data.buyer) return ''
                        return `<div>
                        <p>${data.buyer.mobile}</p>
                         <!--p>昵称:${data.buyer.nickname}</p -->
                </div>`
                    }
                }, {
                    label: '状态',
                    prop: 'typeName',
                    type: 'render',
                    width: '100px',
                    render: (data) => {
                        return orderStatus(data.status)
                    }
                }, {
                    label: '下单时间',
                    width: '180px',
                    prop: 'created',
                    type: 'date'
                }, {
                    label: '转增状态',
                    type: 'render',
                    width: '100px',
                    render: (data) => {
                        if (data.giftDirection == 1) return `<span class="el-tag el-tag--danger mx-1 is-round"><span class="el-tag__content">转出</span></span>`
                        else if (data.giftDirection == 2) return `<span class="el-tag el-tag--primary el-tag--dark mx-1 is-round"><span class="el-tag__content">转入</span> </span>`
                        else return ''
                    }
                },
                {
                    label: '操作',
                    type: 'buttons',
                    width: '250px',
                    buttons: [
                        {
                            label: '查看',
                            type: 'primary',
                            styles: {},
                            icon: 'Search',
                            callback: (data) => {
                                this.form = JSON.parse(JSON.stringify(data));
                                this.visible = true;
                            }
                        },
                        {
                            label: '删除',
                            type: 'danger',
                            styles: {},
                            icon: 'Delete',
                            callback: () => {

                            },
                        }

                    ]
                }
            ],
            data: {
                total: 0,
                list: [],
                page: 1,
                size: 40
            },
            visible: false,
            form: {},
            locationTree: [],
            checkDialog: false,
        }
    },
    created() {
        this.initData();
    },
    methods: {
        initData() {

        },
        onload(data) {
            this.data.page = data.page;
            this.data.size = data.size;
            Object.assign(data, {
                direction: 'DESC',
                properties: ['id']
            })
            this.$api.apiQuery('/api/manage/activity-order/', data).then(res => {
                this.data.list = res.data;
                this.data.total = res.total;
            })
        },
        exportExcel() {
            let data = {page: this.data.page, size: this.data.size};
            this.query.forEach(e => {
                if (e.key)
                    data[e.key] = e.value;
            })

            this.$api.post('/api/manage/activity-order/query', {action: 'excel', type: 'order'}, data).then(res => {
                this.$message.success(res.message)
            }).catch(e => {
                this.$message.error('导出失败')
            })
        }


    }
}
</script>
<style lang="scss">
.description-label {
  width: 120px;
}
</style>